<template>
  <div>
    <basic-container>
      <div class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <el-row v-show="searchadvanced">
            <el-col :span="24">
              <el-form
                :inline="true"
                :model="dataForm"
                @keyup.enter.native="getDataList()"
                class="form-inline"
              >
                <!-- <el-form-item label="奖金类型">
                  <el-select
                    v-model="dataForm.jjLx"
                    placeholder="请选择"
                    :clearable="true"
                    style="width: 120px"
                    @blur="changeVal"
                  >
                    <el-option value="1" label="年度"></el-option>
                    <el-option value="3" label="日常"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="开始日期">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    :clearable="true"
                    v-model="dataForm.startDate"
                    type="date"
                    placeholder="选择开始日期"
                    style="width: 160px"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    :clearable="true"
                    v-model="dataForm.endDate"
                    type="date"
                    placeholder="选择结束日期"
                    style="width: 160px"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- <el-form-item v-if="dataForm.jjLx == 3" label="月份">
                  <div
                    class="el-date-editor el-range-editor el-input__inner"
                    style="width: 240px"
                  >
                    <el-select
                      size="mini"
                      v-model="dataForm.startMonth"
                      style="width: 90px"
                      placeholder=""
                    >
                      <el-option
                        v-for="item in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)"
                        :key="item"
                        :value="item"
                        :label="item + '月'"
                        :clearable="true"
                      ></el-option>
                    </el-select>
                    <slot name="range-separator">
                      <span style="width: 40px" class="el-range-separator"
                        >至</span
                      >
                    </slot>
                    <el-select
                      size="mini"
                      v-model="dataForm.endMonth"
                      style="width: 90px"
                      placeholder=""
                    >
                      <el-option
                        v-for="item in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)"
                        :key="item"
                        :value="item"
                        :clearable="true"
                        :label="item + '月'"
                      ></el-option>
                    </el-select>
                  </div>
                </el-form-item> -->
                <el-form-item label="奖金项">
                  <el-select
                    v-model="dataForm.jjxId"
                    placeholder="选择奖金项"
                    clearable
                    class="xiaLa"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="(item, index) in jjxOptions"
                      :key="index"
                      :label="item.jjxMc"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="奖金名称">
                  <el-input
                    v-model="dataForm.fpName"
                    placeholder="奖金名称"
                    :clearable="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-cascader
                    v-model="arrId"
                    :options="departmentOptions"
                    :props="{
                      multiple: true,
                      checkStrictly: true,
                      expandTrigger: 'hover',
                      value: 'id',
                      label: 'name',
                    }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="marginLeft"
                    plain
                    @click="getDataList"
                    >检索</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div>
          
        </div>
        <div style="overflow:hidden;">
          <div class="pull-right">
            <el-button @click="fnExport" type="primary" plain>导出</el-button>
          </div>
        </div>
        
        <el-table
          :data="tableData"
          ref="multipleTable"
          border
          v-loading="loading"
          max-height="600"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            prop=""
            label="序号"
            min-width="60"
            :formatter="nShowIndex"
            align="center"
          ></el-table-column>
          <el-table-column
            v-for="item in tableHead"
            :label="item.label"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { fetchTree } from "@/api/admin/dept";
import { updateBmFP } from "@/api/jiangjin/jiangjinjjxxxb";
import { getJjDeptJjx,exportExcelJiangjinList,getUserDeptId,getUserDeptInfo } from "@/api/jiangjin/jiangjinjjxxxb";
import { selectResultPage } from "@/api/jiangjin/jiangjinfpjjbmfppzmxb";
export default {
  data() {
    return {
      innerVisible: true,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableColumn: [],
      loading: false,
      dataForm: {},
      departmentOptions: [],
      jjxOptions: [],
      deptId: "1",
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      searchadvanced: true,
      searchheight: "0",
      tableHead: [],
      arrId:[],
    };
  },
  created() {
    
    //this.$set(this.dataForm,'jjLx','3')
    
    this.ongetUserDeptId()
  },
  methods: {
    ongetUserDeptId(){
      getUserDeptId().then(res=>{
        if(res.data.data){
		  this.deptId = res.data.data
		  this.getJjDeptJjx();
          fetchTree({pid:res.data.data}).then((response) => {
            console.log(JSON.stringify(response))
            if(response.data.data.length>0){
               this.departmentOptions = this.dealTreeData(response.data.data);
            }else{
              getUserDeptInfo().then(res=>{
                this.departmentOptions=this.dealTreeData(res.data.data)
                
              })
            }
           
          });
        }
      })
    },
    // 处理部门tree数据，将最后的children:[]改成undefined,否则级联下拉框会多出一层
    dealTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.dealTreeData(data[i].children);
        }
      }
      return data;
    },
    //检索
    getDataList() {
      this.dataForm.deptIds = ''
      if (this.arrId.length > 0) {
        for (let i=0; i<this.arrId.length; i++) {
          const dep = this.arrId[i]
          this.dataForm.deptIds += dep[dep.length - 1] + ','
        }
        this.dataForm.deptIds = this.dataForm.deptIds.substring(0, this.dataForm.deptIds.length - 1)
      }
      this.loading = true;
      selectResultPage(
        Object.assign(
          {
            pageNum: this.pageIndex,
            pageSize: this.pageSize,
          },
          this.dataForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.tableData;
          this.totalPage = response.data.data.totalPage;
          this.loading = false;
          this.tableHead = response.data.data.tableColumn;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    //导出
    fnExport(){
this.dataForm.deptIds = ''
      if (this.arrId.length > 0) {
        for (let i=0; i<this.arrId.length; i++) {
          const dep = this.arrId[i]
          this.dataForm.deptIds += dep[dep.length - 1] + ','
        }
        this.dataForm.deptIds = this.dataForm.deptIds.substring(0, this.dataForm.deptIds.length - 1)
      }
      exportExcelJiangjinList(Object.assign(
          {
            pageNum: this.pageIndex,
            pageSize: this.pageSize,
          },
          this.dataForm
        )).then(res=>{

      })
    },
    init(fpId, cfLx, isfang) {
      this.getupdateBmFP(fpId, cfLx);
    },
    getupdateBmFP(fpId, cfLx) {
      this.loading = true;
      updateBmFP(fpId, cfLx).then((res) => {
        this.tableData = res.data.data.tableData;
        this.tableColumn = res.data.data.tableColumn;
        this.loading = false;
      });
    },
    //获取奖金项列表
    getJjDeptJjx() {
      getJjDeptJjx(this.deptId).then((res) => {
        this.jjxOptions = res.data.data;
      });
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    changeVal() {
      console.log(this.dataForm);
      this.dataForm = {};
    },
  },
};
</script>

<style>
.ffdi {
  padding: 5px 10px;
}
.el-date-editor .el-input__inner{
  background: linear-gradient(45deg, #f4f4fc, #f5f5f5);
}
</style>
<style scoped>
.el-range-editor.el-input__inner{
  background: linear-gradient(45deg, #f4f4fc, #f5f5f5);
}

</style>
